<script setup>
import { reactive } from 'vue'
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()

const userInfo = reactive({
  id: '',
  name: '',
  role: '',
  avatarUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  titleName: ''
})

const role = authStore.userInfo['role']
if (role === 'admin') {
  userInfo.id = authStore.userInfo['id']
  userInfo.name = authStore.userInfo['username']
  userInfo.role = '学校管理员'
  userInfo.titleName = '学校管理员'
} else if (role === 'class') {
  userInfo.id = authStore.userInfo['student']['id']
  userInfo.name = authStore.userInfo['student']['name']
  userInfo.titleName = authStore.userInfo['class']['name']
  userInfo.role = '班级管理员'
} else if (role === 'department') {
  userInfo.id = authStore.userInfo['student']['id']
  userInfo.name = authStore.userInfo['student']['name']
  userInfo.titleName = authStore.userInfo['department']['name']
  userInfo.role = '部门管理员'
}


</script>

<template>
  <div class="header">
    <div class="left">
      <h1>学生综合素质培养管理系统 - {{ userInfo.titleName }}</h1>
    </div>

    <div class="right">
      <div class="info">
        <p>{{ userInfo.role }}：{{ userInfo.name }}</p>
      </div>
      <div class="avatar">
        <el-avatar :size="50" :src="userInfo.avatarUrl" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 86px;
  padding: 0 20px;
}

.header .right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
  font-size: 14px;
}

.header .right .info {
  margin-right: 30px;
}
</style>